<template>
  <div>
    <n-modal
      v-if="props.showModal"
      v-model:show="props.showModal"
      :mask-closable="true"
      @update:show="$emit('CheckShowModal', false)"
    >
      <n-card
        style="width: 600px"
        title="编辑用户"
        :bordered="false"
        size="huge"
        role="dialog"
        aria-modal="true"
      >
        <template #header-extra>
          <n-button type="error" @click="$emit('CheckShowModal', false)">
            X
          </n-button>
        </template>
        <n-form ref="formRef" :model="model" :rules="rules">
          <n-form-item path="name" label="姓名">
            <n-input v-model:value="model.uName" placeholder="请输入姓名" />
          </n-form-item>
          <n-form-item path="email" label="密码">
            <n-input v-model:value="model.uPwd" placeholder="请输入密码" />
          </n-form-item>
          <n-form-item path="email" label="电话">
            <n-input v-model:value="model.uTel" placeholder="请输入号码" />
          </n-form-item>
          <n-form-item path="URL" label="角色">
            <n-input-group>
              <n-select
                :style="{ width: '100%' }"
                :options="Options"
                :placeholder="Rlouse"
                @change="handleChangeRlous"
              />
            </n-input-group>
          </n-form-item>
          <n-form-item path="URL" label="部门">
            <n-input-group>
              <n-select
                :style="{ width: '100%' }"
                :options="selectOptions"
                :placeholder="Dept"
                @change="handleChangeDept"
              />
            </n-input-group>
          </n-form-item>
          <n-checkbox-group v-model:value="cities" @click="change">
            <n-space item-style="display: flex;">
              <n-checkbox
                v-for="item in menu"
                :key="item.nId"
                :value="item.nId"
                :label="item.nName"
              />
            </n-space>
          </n-checkbox-group>
          <n-row :gutter="[0, 24]">
            <n-col :span="24">
              <div style="display: flex; justify-content: center">
                <n-button round type="primary" @click="UpdateUserFile">
                  修改
                </n-button>
              </div>
            </n-col>
          </n-row>
        </n-form>
      </n-card>
    </n-modal>
    <n-skeleton v-else text :repeat="2" />
    <n-skeleton text style="width: 60%" />
  </div>
</template>

<script lang="ts" setup>
import { defineProps, ref, reactive, onMounted } from "vue";
import { GetUserInfo, EditUserInfo } from "@/api/user";
import { GetOfficeInfo } from "@/api/office";
import { GetRolesInfo } from "@/api/rolse";
import { getNav } from "@/api/menu";
import { getRoles } from "@/api/rolse";
import { getOffice } from "@/api/office";
const formRef = ref();
const emit = defineEmits(["CheckShowModal", "reloadpage"]);
const props = defineProps({
  showModal: {
    type: Boolean,
    default: false,
  },
  userId: {
    type: Number,
    default: "",
  },
});
const menu: any = ref([]);
const cities: any = ref();
const selectOptions: any = ref([]);
const Options: any = ref([]);
const Rlouse: any = ref("");
const Dept: any = ref("");
const model:any = reactive({
  uId: '',
  uName: "",
  uPwd: "",
  rId: '',
  dId: '',
  uTel: "",
  uPower: "",
});
// const model1 = reactive({
//   uId: 1,
//   uName: "admins",
//   uPwd: "123456",
//   rId: 1,
//   dId: 1,
//   uTel: "13111111111",
//   uPower: "1,2,3,4,5,6,7,8",
// });
const params = reactive({
  uId: 1,
});
const dId = reactive({
  dId: 1,
});
const rId = reactive({
  rId: 1,
});
const param = reactive({});
const init = () => {
  getOffice(params).then((res) => {
    res.data.forEach((item: any) => {
      selectOptions.value.push({
        label: item.dName,
        value: item.dId,
      });
    });
  });
  getRoles().then((res) => {
    res.data.forEach((item: any) => {
      Options.value.push({
        label: item.rName,
        value: item.rId,
      });
    });
  });
};
init();
onMounted(() => {
  params.uId = props.userId;
  model.uId = props.userId;
  if (props.userId) {
    GetUserInfo(params).then((res: any) => {
      model.uName = res.data.uName;
      model.uPwd = res.data.uPwd;
      model.uTel = res.data.uTel;
      model.dId = Number(res.data.dId);
      dId.dId = Number(res.data.dId);
      model.rId = Number(res.data.rId);
      rId.rId = Number(res.data.rId);
      model.uPower = res.data.uPower;
      cities.value = res.data.uPower.split(",");
      GetOfficeInfo(dId).then((resa) => {
        Dept.value = resa.data.dName;
      });
      GetRolesInfo(rId).then((resb) => {
        Rlouse.value = resb.data.rName;
      });
    });
  }
});
const handleChangeRlous = (value: any) => {
  model.rId = value;
};
const handleChangeDept = (value: any) => {
  model.dId = value;
};
const rules = {
  uName: [
    {
      required: true,
      message: "请输入姓名",
      trigger: ["input", "blur"],
    },
  ],
  uPwd: [
    {
      required: true,
      message: "请输入密码",
      trigger: ["input", "blur"],
    },
  ],
  uTel: [
    {
      required: true,
      message: "请输入号码",
      trigger: ["input", "blur"],
    },
  ],
};
getNav(param).then((res) => {
  res.data.data.forEach((item: any) => {
    menu.value.push({ nId: item.nId, nName: item.nName });
  });
});
const change = () => {
  model.uPower = cities.value.join(",");
};
const UpdateUserFile = (e: Event) => {
  e.preventDefault();
  formRef.value.validate((err: any) => {
    if (err) {
      console.log(err);
    } else {
      EditUserInfo(model).then((res: any) => {
        emit("CheckShowModal", false);
        emit("reloadpage");
      });
    }
  });
};
</script>

<style scoped lang="scss"></style>
